<html xmlns:th="http://www.thymeleaf.org"  
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"    
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">    
<html>
<head th:include="common/common::header">
<meta charset="UTF-8">
 <link rel="stylesheet" type="text/css" href="/base/talk/mui.imageviewer.css">
 <link rel="stylesheet" type="text/css" href="/base/talk/chat-im.css">
<style type="text/css">
#index {
	padding: 15px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	opacity: 0;
	font-size: 12px;
}

.index-l {
	padding: 10px;
	width: 48%;
	overflow: auto;
}
</style>
</head>

<body>
	<div id="index">
		<form id="SysTalk_form" class="easyui-form" method="post" data-options="novalidate:true">
					<div id="you" class="easyui-panel form-item" title="聊天框"     
					        style="width:100%;height:200%;background:#fafafa;"   
					        data-options="iconCls:'icon-save',closable:false,  
					                collapsible:false,minimizable:false,maximizable:false,border:false">   
							<div class="im-chat-main">
						        <ul id="msg_list">
						        
						        </ul>
						    </div>
					</div>  
					<br> 
					<div id="msg_go">
							<div class="form-item" style="height: 90%;">
						<script type="text/plain" id="talk_editor" style="width:100%;height:20px;">
						</script>
						</div>
					
						<br>
						<div style="padding-left: 80%;height: 10%;">
							<a href="javascript:void(0)" onclick="submitForm()" class="easyui-linkbutton"data-options="iconCls:'fa fa-floppy-o'"style="height:100%; border-left-width: 1px;">发送</a> 
						</div>
					</div>
					<input type="hidden" th:value="${username}" name="receiver" id="username">
					<input type="hidden"  name="msg" id="msg">
		</form>
	</div>
<script src="http://cdn.sockjs.org/sockjs-0.3.min.js"></script>  
<script type="text/javascript" charset="utf-8" src="/base/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/base/ueditor/ueditor.all.js"></script>
<script type="text/javascript" src="/base/ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript">
var ue = UE.getEditor('talk_editor', {
    toolbars: [
        ['fullscreen', 'undo', 'redo', 'bold','emotion','insertimage']
    ],
    autoHeightEnabled: true,
    autoFloatEnabled: true,
    autosave:false 
});


ue.addListener("ready", function () {  
		ue.setHeight(50);
}); 


UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
    if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {
        var url = 'http://127.0.0.1:8082/common/upload?attachmentsType=2';
        return url;
    } else if (action == 'uploadvideo') {
        return 'http://127.0.0.1:8082/common/upload?attachmentsType=2';
    } else {
        return this._bkGetActionUrl.call(this, action);
    }
}

function submitForm(){
	var content = UE.getEditor('talk_editor').getContent();
	if(content.trim()==null || content.trim()=='' ||  content.trim()=="") {
		layer.msg("内容不能为空",{icon:7,time:2000});
		return;
	}
	$('#msg').val(content);
	$('#SysTalk_form').form('submit',{
		url:'/connect/talk.do',
		onSubmit:function(){
			return $(this).form('enableValidation').form('validate');
		},
		 success: function (data) {
			 if (JSON.parse(data).status ==200) {
				 ue.setContent('');
				 load_read()
				} else {
						$.messager.alert('消息',JSON.parse(data).msg);
				}
		 }
	});
}
connect()

function load_read() {
	var username = $("#username").val()
	$.ajax({
		url:'/connect/read',
		type: 'POST',
		dataType:'json',
		data:{
			sender:username,
		},
		success: function(data){
			if(data.status==200) {
				var you = $("#msg_list")
				$("#msg_list").empty()
				for (var i = 0; i < data.data.length; i++) {
					you.append("<li><div class=\"im-chat-user\"><cite><span style=\"display:inline-block;font-size: 16px;color: "+data.data[i].who+"\">"+data.data[i].send+"</span><span style=\"color: #1B8CF2;float:right;padding:5px 20px;display:inline-block;\">"+data.data[i].time+"</span></cite></div><div class=\"im-chat-text\" style=\"font-size: 18px\">"+data.data[i].msg+"</div></li><br>");
				}
				$.parser.parse(you);
			}
			},
			error:function(data) {
				console.log(data.data);	
			}
		})
}

$(function(){
	console.log($("#talk-dialog").height())
	$("#you").height($("#talk-dialog").height()*0.55)
	$("#msg_go").height($("#talk-dialog").height()*0.25)
	
	var username = $("#username").val()
	$.ajax({
		url:'/connect/read',
		type: 'POST',
		dataType:'json',
		data:{
			sender:username
		},
		success: function(data){
			if(data.status==200) {
				var you = $("#msg_list")
				$("#msg_list").empty()
				for (var i = 0; i < data.data.length; i++) {
					you.append("<li><div class=\"im-chat-user\"><cite><span style=\"display:inline-block;font-size: 16px;color: "+data.data[i].who+"\">"+data.data[i].send+"</span><span style=\"color: #1B8CF2;float:right;padding:5px 20px;display:inline-block;\">"+data.data[i].time+"</span></cite></div><div class=\"im-chat-text\" style=\"font-size: 18px\">"+data.data[i].msg+"</div></li><br>");
				}
				$.parser.parse(you);
			}
			},
			error:function(data) {
				console.log(data.data);	
			}
		})
}); 
</script>
</body>
</html>